<script setup>
import { ref } from 'vue'
import SonText from './components/SonText.vue'
import SolotText from './components/SolotText.vue'
const title = ref(1)
const OpenShow = ref(true)
const addTitles = (newTitle) => {
  title.value = newTitle
}
const delTitle = () => {
  title.value--
}
const text = ref(true)
</script>
<template>
  <div style="width: 200px; height: 200px; border: 3px solid">
    我是父组件
    <SonText :title="title" @update-title="addTitles"></SonText>
    <button @click="delTitle">-内容</button>
    <button @click="OpenShow = true">打开插槽</button>
  </div>
  <SolotText v-if="OpenShow">
    <template #title>我是头部</template>
    <template #content>我是内容</template>
    <template #footer>
      <button @click="OpenShow = false">关闭</button>
    </template>
  </SolotText>
  <div v-if="text">
    原来的内容
    <button @click="text = false">1</button>
  </div>
  <div v-else>
    后面出现的内容
    <button @click="text = true"></button>
  </div>
</template>
